<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
	
</style>
<div id="app" class="container" >
    <div class="row clearfix">
        <div class="col-md-12">
            <div class="page-header">
                <h1>
                    <small>购物车页面</small>
                </h1>
            </div>
        </div>
        <div>     
            <div>
				<form  style="float:right" class="form-inline">
                    <span style="color:red;font-weight: bold"></span>
					<a  class="btn btn-primary" v-bind:href="'orderList1.html'">返回购物车</a>
					<!-- <button v-on:click="deleteItemById(id)">删除</button> -->
                </form>
            </div>
			
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
						<td>账单ID编号</td>
						<td>购买商品名称</td>
						<td>购买的数量</td>
						<td>商品单价</td>
						<td>总费用</td>
						<td>商品类型</td>
                </tr>
                </thead>
                <tbody>
               
                    <tr v-for="item in itemArray">
							<td>{{item.id}}</td>
							<td>{{item.commodityName}}</td>
							<td>{{item.amount}}</td>
							<td>{{item.commodityPrice}}</td>
							<td>{{item.cost}}</td>
							<td>{{item.commodityCategory}}</td>
							

                        <td>
                            <a class="btn btn-primary"
                               href="#" v-on:click="deleteItemById(item.id)">删除</a>
                        </td>
                           
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
		<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.min.js"></script>
		<script src="assets/js/const.js"></script>
		<script>
			var config = {
					"el": "#app",
					"data": {
						"itemArray": []
					},
					"methods": {
						"deleteItemById":function(id){
							var serverUrl = baseUrl+"/orderlist/deleteById?id="+id;
							axios.get(serverUrl)
							.then(function(response){
								var code = response.data.code;
								if(code==0){
									window.alert("删除成功")
									this.vue.selectItemAll();
								}else{
									window.alert("删除失败")
								}
							})
							.catch();
							},
						"selectItemByCategoryName": function(categoryName) {
								//http://localhost:9092/orderlist/selectByCategoryName?categoryName=%E6%B0%B4%E6%9E%9C
								var serverUrl = baseUrl + "/orderlist/selectByCategoryName?categoryName="+categoryName;
								
								console.log(serverUrl);
								axios.get(serverUrl)
									.then(function(response) {
										// window.alert("成功");
										var serverResult = response.data;
										//serverResult有3个属性，商品数据放在data中
										var itemList = serverResult.data;
										//在then这个函数中访问data中的变量，要加this.vue
										this.vue.itemArray = itemList;
									})
									.catch(function(response) {
										window.alert("失败");
									})
									
							}
						},
					"mounted": function() {
						var parameter =location.search;
						var strArray =parameter.split("=");//字符串切割
						var categotyName =strArray[1];
						console.log(categotyName);
						this.selectItemByCategoryName(categotyName);
					}
				};
				var vue = new Vue(config);
		</script>
</html>
